import { addAnswer, getQuestionList, getQuestionNameList, getQuestionThreePullList } from "@/services";
import { IQuestionListQuery, IQuestionList, IPracticalProjectList } from "@/utils/questions";
import React, { useState, useEffect } from "react";
import styles from "./questionDetail.less"
import { Checkbox, Input, Button, Pagination, Modal, Select, Form, Space, Typography, Tooltip } from 'antd';
import { Link } from 'umi';
import { DownOutlined, PlusOutlined, SearchOutlined, SettingOutlined } from '@ant-design/icons';
import { SelectValue } from "antd/lib/select";
import { observer } from 'mobx-react-lite';
const { Option } = Select;
let xx = ""
import Editor from 'for-editor';
import useStore from "@/context/useStore";
//类型标题
const genre = [{ name: "全部", type: "" },
{ name: "实训", type: "0" },
{ name: "答辩", type: "4" },
{ name: "面试", type: "1" },
{ name: "工作", type: "2" },
{ name: "其他", type: "3" },
{ name: "我的问答", type: "5" },
];

//我要提问
const addGenre = [{ name: "实训", type: "0" },
{ name: "面试", type: "1" },
{ name: "工作", type: "2" },
{ name: "其他", type: "3" },]
const questionDetail: React.FC = (props) => {
    let { question } = useStore()

    //弹框内容数据
    let [typeChange1, handleChange1] = useState<any>("")
    let [typeChange2, handleChange2] = useState<any>("")
    const onFinish = (values: any) => {
        //我要提问 >  发布
        const { labels, questionContent, questionTitle, text1, text2, type } = values
        let params = { labels: [labels], questionContent: questionContent, questionTitle: questionTitle, text1: text1, text2: text2, type: type }
        addAnswer(params).then(res => {
            alert(res.msg)
            handleOk()
            question.getQuestionList(queryParams)
        })
    };


    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };

    //开启我要提问弹框
    const [isModalVisible, setIsModalVisible] = useState(false);
    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    //查看全部内容
    let [lookAll, setLookAll] = useState(!true)

    //我要提问 实训项目下拉菜单
    let [practicalProjectList, setPracticalProjectList] = useState<IPracticalProjectList[]>([])

    useEffect(() => {
        getQuestionNameList().then(res => {
            console.log(res)
            setPracticalProjectList(res.data)
        })
    }, [])

    //问答数据列表的默认参数
    let queryParams: IQuestionListQuery = { isAsc: 'desc', type: '', pageNum: 1, pageSize: 8 };
    useEffect(() => {
        if (question.curgenre) {
            queryParams = {
                ...queryParams,
                type: question.curgenre,
                quality: question.quality,
                authentication: question.authentication,
                questionTitle: question.questionTitle,
                pageNum: question.pageNum
            }
        } else {
            queryParams = {
                ...queryParams,
                type: question.curgenre,
                quality: question.quality,
                authentication: question.authentication,
                questionTitle: question.questionTitle,
                pageNum: question.pageNum
            }
        }
        question.getQuestionList(queryParams)
    }, [question.curgenre, question.quality, question.authentication, question.questionTitle, question.pageNum]);


    function handleChange(value: SelectValue) {
        console.log(`selected ${value}`);
        handleChange2(value)
    }
    return (
        <div className={styles.mainBox}>
            <div className={styles.main}>
                <div className={styles.main_title}>
                    问答 / 问答列表
                </div>
                <div className={styles.genre}>
                    <span>类型 : </span>
                    {
                        genre.map((item) => {
                            return <span key={item.type} className={item.type == question.curgenre ? styles.active : ""}
                                onClick={(e) => { question.setCurgenre(item.type) }}
                            >{item.name}</span>
                        })
                    }
                </div>
                <div className={styles.con}>
                    <li className={styles.con_title}>
                        <div>
                            <Checkbox onChange={(e) => { question.setQuality(e.target.checked) }}>仅看精品</Checkbox>
                            <Checkbox onChange={(e) => { question.setAuthentication(e.target.checked) }}>仅看教师认证答案</Checkbox>
                            <Input placeholder="搜索岗位"
                                suffix={<SearchOutlined onClick={() => {question.setQuestionTitle(question.title) }} />}
                                onChange={e => question.setTitle(e.target.value)} onKeyDown={e => {
                                    if (e.keyCode === 13) {
                                        question.setQuestionTitle(question.title)
                                    }
                                }} />
                            <Button type="primary" icon={<PlusOutlined />} onClick={showModal}>我要提问</Button>
                            {/* 我要提问弹框弹框 */}
                            <Modal title="提问" className={styles.ant_modal}
                                visible={isModalVisible}
                                onOk={handleOk}
                                onCancel={handleCancel}
                                footer={null}>
                                <div className={styles.form_box}>
                                    <Form
                                        name="basic"
                                        initialValues={{ remember: true }}
                                        onFinish={onFinish}
                                        onFinishFailed={onFinishFailed}>

                                        <Form.Item className={styles.wentiName}>
                                            <div>标题</div>
                                            <Space className={styles.wentiName_space}>
                                                <Form.Item
                                                    name="questionTitle"
                                                    noStyle
                                                    rules={[{ required: true, message: 'Please input your questionTitle!' }]}
                                                    className={styles.wentiName_space_item}
                                                >
                                                    <Input style={{ width: 160 }} placeholder="请输入问题名称" />
                                                </Form.Item>
                                            </Space>
                                        </Form.Item>
                                        <Form.Item >
                                            <Input.Group compact>
                                                <Form.Item style={{ marginRight: 20 }}
                                                    name="type"
                                                    noStyle
                                                    rules={[{ required: true, message: 'Province is required' }]}
                                                >
                                                    <Select placeholder="请选择问题类型" style={{ width: 120 }} onChange={(e) => { handleChange1(e) }} >
                                                        {
                                                            addGenre.map((item) => {
                                                                return <Option value={item.type} key={item.type}>{item.name}</Option>
                                                            })
                                                        }
                                                    </Select>
                                                </Form.Item>
                                                {
                                                    typeChange1 === "0" ? <div>
                                                        <Form.Item
                                                            name="text1"
                                                            noStyle
                                                            rules={[{ required: true, message: 'Street is required' }]}
                                                        >
                                                            <Select placeholder="请选择项目" style={{ width: 120 }} onChange={(e) => {
                                                                handleChange(e)
                                                                console.log(e)
                                                            }}>
                                                                {
                                                                    typeChange1 === "0" ? practicalProjectList.map((item) => {
                                                                        return <Option value={item.value} key={item.value}>{item.name}</Option>
                                                                    }) : null
                                                                }
                                                            </Select>
                                                        </Form.Item>
                                                        <Form.Item
                                                            name="text2"
                                                            noStyle
                                                            rules={[{ required: true, message: 'Street is required' }]}
                                                        >
                                                            <Select placeholder="请选择任务" style={{ width: 120 }} >
                                                                {/* {
                                                            practicalProjectList.map((item) => {
                                                                return <Option value={item.value} key={item.value}>{item.name}</Option>
                                                            })
                                                        } */}
                                                            </Select>
                                                        </Form.Item>
                                                    </div> : <div>
                                                        {
                                                            typeChange1 === "1" ? <div>
                                                                <Form.Item style={{ marginBottom: 0 }}>
                                                                    <Form.Item
                                                                        name="text1"
                                                                        rules={[{ required: true }]}
                                                                        style={{ display: 'inline-block', width: 120 }}
                                                                    >
                                                                        <Input placeholder="公司" />
                                                                    </Form.Item>
                                                                    <Form.Item
                                                                        name="text2"
                                                                        rules={[{ required: true }]}
                                                                        style={{ display: 'inline-block', width: 120 }}
                                                                    >
                                                                        <Input placeholder="岗位" />
                                                                    </Form.Item>
                                                                </Form.Item>
                                                            </div> : <div>
                                                                {
                                                                    typeChange1 === "2" ? <div>
                                                                        <Form.Item style={{ marginBottom: 0 }}>
                                                                            <Form.Item
                                                                                name="text1"
                                                                                rules={[{ required: true }]}
                                                                                style={{ display: 'inline-block', width: 120 }}
                                                                            >
                                                                                <Input placeholder="工作" />
                                                                            </Form.Item>
                                                                        </Form.Item>
                                                                    </div> : <div>
                                                                        {
                                                                            typeChange1 === "3" ? <div>
                                                                                <Form.Item style={{ marginBottom: 0 }}>
                                                                                    <Form.Item
                                                                                        name="text1"
                                                                                        rules={[{ required: true }]}
                                                                                        style={{ display: 'inline-block', width: 120 }}
                                                                                    >
                                                                                        <Input placeholder="其他" />
                                                                                    </Form.Item>
                                                                                </Form.Item></div> : <div>
                                                                                <Form.Item
                                                                                    name="text1"
                                                                                    noStyle
                                                                                    rules={[{ required: true, message: '请选择项目' }]}
                                                                                >
                                                                                    <Select placeholder="请选择项目" style={{ width: 120 }} onChange={(e) => { handleChange(e) }}>
                                                                                    </Select>
                                                                                </Form.Item>
                                                                                <Form.Item
                                                                                    name="text2"
                                                                                    noStyle
                                                                                    rules={[{ required: true, message: '请选择任务' }]}>
                                                                                    <Select placeholder="请选择任务" style={{ width: 120 }} >

                                                                                    </Select>
                                                                                </Form.Item>
                                                                            </div>
                                                                        }
                                                                    </div>
                                                                }
                                                            </div>
                                                        }
                                                    </div>
                                                }

                                            </Input.Group>
                                        </Form.Item>
                                        <div className={styles.questionContentBox}>
                                            <div>描述</div>
                                            <Form.Item style={{ marginBottom: 0 }}>
                                                <Form.Item
                                                    name="questionContent"
                                                >
                                                    <Editor placeholder="开始编辑..."
                                                        style={{ height: 300 }}
                                                        onChange={(value) => {
                                                            console.log(value);
                                                        }} />
                                                </Form.Item>
                                            </Form.Item>
                                        </div>
                                        <div className={styles.tag}>
                                            <div>标签</div>
                                            <Form.Item
                                                name="labels"
                                                noStyle
                                                rules={[{ required: true, message: 'Please input your tag!' }]}
                                            >
                                                <Input style={{ width: 600 }} placeholder="标签" />
                                            </Form.Item>
                                        </div>
                                        <div className={styles.fb}>

                                            <Form.Item label=" " colon={false}>
                                                <Button type="primary" htmlType="submit">发布</Button>
                                            </Form.Item>
                                        </div>
                                    </Form>
                                </div>
                            </Modal>
                        </div>
                    </li>
                    <ul className={styles.uls}>
                        {
                            question.questionList.map((item) => {
                                return <div className={styles.divs} key={item.answerId}>
                                    <div>
                                        <div className={styles.divs_top}>
                                            <div className={styles.divs_top_left}>
                                                <span>{item.qUserName}</span>
                                                <span>{item.replyTime}</span>
                                                <span>实训类型:{genre.map(item1 => {
                                                    if (item1.type == item.typeNum) {
                                                        return <span className={styles.typeNum} key={item1.type}>{item1.name}</span>
                                                    }
                                                })}</span>
                                            </div>
                                            <div className={styles.divs_top_right}>
                                                <img src={xx} alt="" /><span>{item.answerCount}</span>
                                            </div>
                                        </div>
                                        <div className={styles.divs_con}>
                                            <div className={styles.divs_question_title}>
                                                <span>{item.quality ? <img src="http://111.203.59.61:8060/static/img/boutique.fc46be52.svg" alt="" /> : ""}</span>
                                                <span>{item.authentication ? <img src="http://111.203.59.61:8060/static/img/authentication.c814dd7c.svg" alt="" /> : ""}</span>
                                                <span>{item.questionTitle}</span>
                                            </div>
                                            <div className={styles.divs_con_children}>
                                                <div className={lookAll ? styles.questionContentActive : styles.questionContent}>
                                                    {item.questionContent}
                                                </div>
                                                <div className={styles.lookAll}><span onClick={() => {
                                                    setLookAll(!false)
                                                    // console.log(lookAll)
                                                }}>查看全部</span><DownOutlined /></div>
                                            </div>
                                        </div>
                                        <div className={styles.divs_comment}>{item.labels.map((item1, index1) => {
                                            return <span key={index1}>{item1}</span>
                                        })}</div>
                                    </div>
                                    <Button><Link to={`/teachers/answerDetail?answerId=${item.answerId}`}>回答</Link></Button>
                                </div>
                            })
                        }

                        <div className={styles.page}>
                            <Pagination
                                defaultCurrent={1}
                                onChange={(e) => { question.setPAgeNum(e) }}
                                total={question.questionListLen} size="default"
                                showSizeChanger showQuickJumper pageSize={8} pageSizeOptions={["8"]} />
                        </div>
                    </ul>
                </div>

            </div>
        </div>
    )
}
export default observer(questionDetail)
